$(function () {
    $("#header").load("./header.html")
    $("#footer").load("./footer.html")




    // 回到顶部
    // $(".toTop").on("scroll",function(){
    //     $(this).hide();
    // })
    $(document).scroll(function () {
        if ($(document).scrollTop() > 700) {
            $(".toTop").show();
        } else {
            $(".toTop").hide();
        }
    })

    $(".toTop").click(function () {
        $("html,body").animate({
            scrollTop: 0
        })
    })
    // 耳机跳转
    $(".good1 .toProduct").on("click", function () {
        location = "./product.html"
    })

    // ajax请求
    $.ajax({
        url: "./api/product",
        type: "get",
        dataType: "json"
    }).done((res) => {
        // console.log(res)
        var strHtml = "";
        res.forEach(el => {
            strHtml += `
            <li>
            <div class=" item good1">
                <p><a href="./product.html?id=${el.p_id}" class='toProduct'><img src="${el.p_img_index}" alt=""></a>
                </p>
                <p class="hot-details">
                <a href="./product.html?id=${el.p_id}" class='toProduct'>${el.p_name}</a>
                </p>
                <p><span class='doll'>￥</span><span class="hot-price">${el.p_price}</span>
                <span class="hot-buy"><a href='./product.html?id=${el.p_id}'>抢购</a></span>
                </p>
            </div>
            </li>
            `
        })
        $(".itemList .list").html(strHtml)
    })



    //轮播图

    //菜单列表tab栏切换
    $(".conLeft .catolist").find(".cli").mouseenter(function () {
        $(this).addClass("active").siblings().removeClass("active");
        $(this).css("backgroundColor", "#fff").siblings().css("backgroundColor", "#F7F7F7");
        var $index = $(this).index();
        $(".conLeft .listBox").css("display", "block");

        $(".conLeft .listBox .liBox").eq($index).addClass("selected").siblings().removeClass("selected");
    })
    $(".conLeft .list-tab").mouseleave(function () {
        $(".conLeft .listBox").css("display", "none");

    })

    //banner轮播图

    var $oBanInner = $(".topselect .inner")

    var $banIndex = 0;
    // var $banDotIndex = 0;
    function autoPlay1() {
        $banIndex++;
        if ($banIndex == 2) {
            $banIndex = 0;
        }
        $(".inner .bannerBox ul li").eq($banIndex).stop().animate({ "opacity": 1 }, 500, function () {
            $(".inner .bannerBox ul li").eq($banIndex).siblings().stop().animate({ "opacity": 0 }, 500)
        });


    }
    var $timer1 = setInterval(autoPlay1, 3000)
    $oBanInner.mouseenter(function () {
        clearInterval($timer1);
    })
    $oBanInner.mouseleave(function () {
        $timer1 = setInterval(autoPlay1, 3000)
    })

    //banner右上小部分左右轮播

    var $oPlayRightInner = $(".conRight .playRightInner")
    var $oList2 = $(".conRight ul")
    var $oOl = $(".conRight .playRightInner ol")
    // console.log($oList2.find("li").length)
    //创建小圆点
    for (var i = 2; i < $oList2.find("li").length; i++) {
        var $oLi = $("<li></li>");
        if (i == 2) {
            ($oLi).addClass("current");
        }
        $(".playRightInner ol").append($oLi);
    }
    //图片和小圆点的动画
    var $rImgindex = 0;
    var $rDotindex = 0;
    function autoPlay2() {
        $rImgindex++;
        if ($rImgindex > 1) {
            $rImgindex = 0;
        }
        $oList2.animate({ left: -$rImgindex * 226 })
        $rDotindex++;
        if ($rDotindex == 2) {
            $rDotindex = 0;
        }
        $(".playRightInner ol li").eq($rDotindex).addClass("current").siblings().removeClass("current")
    }
    var $timer2 = setInterval(autoPlay2, 3000)
    $(".playRight").mouseenter(function () {
        clearInterval($timer2);
    })
    $(".playRight").mouseleave(function () {
        $timer2 = setInterval(autoPlay2, 3000)
    })

    // banner右下部分小轮播
    var $oMinInner = $(".minPix .miniInner")

    var $banMinIndex = 0;
    function autoPlayMin() {
        $banMinIndex++;
        if ($banMinIndex == 2) {
            $banMinIndex = 0;
        }
        $(".minPix .miniInner ul li").eq($banMinIndex).stop().animate({ "opacity": 1 }, 500, function () {
            $(".minPix .miniInner ul li").eq($banMinIndex).siblings().stop().animate({ "opacity": 0 }, 500)
        });
    }
    var $timerMin = setInterval(autoPlayMin, 3000)
    $oMinInner.mouseenter(function () {
        clearInterval($timerMin);
    })
    $oMinInner.mouseleave(function () {
        $timerMin = setInterval(autoPlayMin, 3000)
    })

    //banner限时抢购轮播
    var $oInner = $(".playBox .playCon");
    var $oList = $(".playBox .playCon ul")
    var $imgIndex = 0;
    function autoPlay() {
        $imgIndex += 4;
        if ($imgIndex > 4) {
            $imgIndex = 0;
        }
        $oList.animate({ left: -$imgIndex * 180 })
    }
    var $timer = setInterval(autoPlay, 3000)
    $("#playBox").mouseenter(function () {
        clearInterval($timer);
    })
    $("#playBox").mouseleave(function () {
        $timer = setInterval(autoPlay, 3000)
    })

    //好评热品手风琴动画

    $(".hotLine1 ul li").mouseenter(function () {
        // console.log($(this))
        $(this).addClass("active").siblings("li").removeClass("active");
        //当前listItemMax显示  listItemMin隐藏
        $(this).find(".listItemMax").css("display", "block")
        $(this).find(".listItemMin").css("display", "none");
        //当前兄弟节点的listItemMax隐藏  listItemMin显示
        $(this).siblings("li").find(".listItemMax").css("display", "none")
        $(this).siblings("li").find(".listItemMin").css("display", "block");
        // $(".listItemMin").show();
    })
    $("hotLine1 ul").mouseleave(function () {
        $(this).addClass("active").siblings("li").removeClass("active")
    })

    //热评tab栏切换
    $(".goodHot .tab").find(".tab-item").mouseenter(function () {
        $(this).addClass("active").siblings().removeClass("active");
        var $index = $(this).index();
        $(".products .proCon").eq($index).addClass("selected").siblings().removeClass("selected");
    })

    //手机·摄影轮播图

    var $oPList = $(" .inner1 ul")
    //    创建小圆点
    for (var i = 1; i < $oPList.find("li").length + 1; i++) {
        var $oPLi = $("<li>" + i + "</li>")
        // console.log($oPLi)
        if (i == 1) {
            $oPLi.addClass("current")
        }
        $(".item1Play ol").append($oPLi);
        console.log($oPLi)
    }
    var $phImgIndex = 0;
    var $pDotIndex = 0;
    // 自动播放
    function autoPlayPhone() {
        $phImgIndex++;
        if ($phImgIndex > 2) {
            $phImgIndex = 0;
        }
        $oPList.animate({
            left: -$phImgIndex * 476,
        })
        $pDotIndex++;
        if ($pDotIndex > 2) {
            $pDotIndex = 0;
        }
        $(".item1Play ol li").eq($pDotIndex).addClass("current").siblings().removeClass("current")

    }
    var $timerPhone = setInterval(autoPlayPhone, 3000)
    $(".item1Play").mouseenter(function () {
        clearInterval($timerPhone)
    })
    $(".item1Play").mouseleave(function () {
        $timerPhone = setInterval(autoPlayPhone, 3000)

    })

    //电脑两个图片轮播
    var $oCList = $(" .inner2 ul")
    //    创建小圆点
    for (var i = 1; i < $oCList.find("li").length + 1; i++) {
        var $oPLi2 = $("<li>" + i + "</li>")
        // console.log($oPLi2)
        if (i == 1) {
            $oPLi2.addClass("current")
        }
        $(".item2Play ol").append($oPLi2);
    }
    var $comImgIndex = 0;
    var $comDotIndex = 0;
    // 自动播放
    function autoPlayCom() {
        $comImgIndex++;
        if ($comImgIndex > 1) {
            $comImgIndex = 0;
        }
        $oCList.animate({
            left: -$comImgIndex * 476,
        })
        $comDotIndex++;
        if ($comDotIndex > 1) {
            $comDotIndex = 0;
        }
        $(".item2Play ol li").eq($comDotIndex).addClass("current").siblings().removeClass("current")

    }
    var $timerCom = setInterval(autoPlayCom, 3000)
    $(".item2Play").mouseenter(function () {
        clearInterval($timerCom)
    })
    $(".item2Play").mouseleave(function () {
        $timerCom = setInterval(autoPlayCom, 3000)

    })

    //家用电器两个图片轮播

    var $oHList = $(" .inner3 ul")
    console.log($oHList.find("li").length)
    //    创建小圆点
    for (var i = 1; i < $oHList.find("li").length + 1; i++) {
        var $oPLi3 = $("<li>" + i + "</li>")
        // console.log($oPLi2)
        if (i == 1) {
            $oPLi3.addClass("current")
        }
        $(".item3Play ol").append($oPLi3);
    }
    var $HomEImgIndex = 0;
    var $HomEDotIndex = 0;
    // 自动播放
    function autoPlayHomE() {
        $HomEImgIndex++;
        if ($HomEImgIndex > 1) {
            $HomEImgIndex = 0;
        }
        $oHList.animate({
            left: -$HomEImgIndex * 476,
        })
        $HomEDotIndex++;
        if ($HomEDotIndex > 1) {
            $HomEDotIndex = 0;
        }
        $(".item3Play ol li").eq($HomEDotIndex).addClass("current").siblings().removeClass("current")

    }
    var $timerHom = setInterval(autoPlayHomE, 3000)
    $(".item3Play").mouseenter(function () {
        clearInterval($timerHom)
    })
    $(".item3Play").mouseleave(function () {
        $timerHom = setInterval(autoPlayHomE, 3000)

    })

    // 生活百货轮播图
    var $oSList = $(" .inner4 ul")

    for (var i = 1; i < $oSList.find("li").length + 1; i++) {
        var $oPLi4 = $("<li>" + i + "</li>")
        // console.log($oPLi)
        if (i == 1) {
            $oPLi4.addClass("current")
        }
        $(".itemPlay4 ol").append($oPLi4);
        console.log($oPLi4)
    }
    var $lSImgIndex = 0;
    var $lSDotIndex = 0;
    // 自动播放
    function autoPlayLS() {
        $lSImgIndex++;
        if ($lSImgIndex > 4) {
            $lSImgIndex = 0;
        }
        $oSList.animate({
            left: -$lSImgIndex * 476,
        })
        $lSDotIndex++;
        if ($lSDotIndex > 4) {
            $lSDotIndex = 0;
        }
        $(".itemPlay4 ol li").eq($lSDotIndex).addClass("current").siblings().removeClass("current")

    }
    var $timerLS = setInterval(autoPlayLS, 3000)
    $(".itemPlay4").mouseenter(function () {
        clearInterval($timerLS)
    })
    $(".itemPlay4").mouseleave(function () {
        $timerLS = setInterval(autoPlayLS, 3000)

    })

    //手机热销榜Tab栏切换

    $(".phone-right .phonelist").find(".tab-item2").mouseenter(function () {
        $(this).addClass("active").siblings().removeClass("active");
        var $index = $(this).index();
        $(".phone-right .phonelist .product .proCon").eq($index).addClass("selected").siblings().removeClass("selected");
    })
    // 电脑热销榜tab切换栏
    $(".phone-right .computerlist").find(".tab-item2").mouseenter(function () {
        $(this).addClass("active").siblings().removeClass("active");
        var $index = $(this).index();
        $(".phone-right .computerlist .product .proCon").eq($index).addClass("selected").siblings().removeClass("selected");
    })
    //家用电器热销榜tab栏切换
    $(".phone-right .homeEleclist").find(".tab-item2").mouseenter(function () {
        $(this).addClass("active").siblings().removeClass("active");
        var $index = $(this).index();
        $(".phone-right .homeEleclist .product .proCon").eq($index).addClass("selected").siblings().removeClass("selected");
    })

    //生活百货热销榜tab栏切换
    $(".phone-right .lifeStorelist").find(".tab-item2").mouseenter(function () {
        $(this).addClass("active").siblings().removeClass("active");
        var $index = $(this).index();
        $(".phone-right .lifeStorelist .product .proCon").eq($index).addClass("selected").siblings().removeClass("selected");
    })

})